--- title: "06-AI 生成应用" created: 2025-12-02 tags: - 项目 aliases: - AI 生成应用 --- # AI 生成应用 ## 本节重点经过前面几期的基‍础搭建，我们的项目代码已经基本成⁡型。本节我们将学习如何使用 La‎ngChain4j 框架接入 A‎I 大模型，让 AI 根据用户的简单描述，自动生成完整的网页应用。本节主要内容： - 设计 AI 应用生成方案 - LangChain4j 框架入门 - 实现 AI 应用生成（2 种生成模式） - 实现 SSE 流式输出提升用户体验 - 通过多种设计模式优化代码架构 ## 一、需求分析我们的需求‍很好理解 —— 让⁡ AI 根据用户的‎描述，自动生成完整的网‎页应用。本节先从最基础的需求开始，让 AI 能够生成 **原生网页代码**，并将代码文件保存到本地。原生是指代‍码中不需要引入第三方⁡框架（比如 Vue ‎和 React），简‎简单单、干干净净，更容易运行，实现起来更简单。我们可以采用 2 种原生生成模式来满足不同的使用场景： - 原生 HTML 模式：将所有代码（HTML、CSS、JS）打包在一个 HTML 文件中，适合快速原型和简单应用 - 原生多文件模式：按照标准的前端项目结构，分别生成 index.html、style.css 和 script.js 文件 ## 二、方案设计在正式开始‍编码之前，我们需要⁡先明确整个 AI ‎应用生成的核心流程‎： **用户输入描述 → AI 大模型生成 → 提取生成内容 → 写入本地文件** 这个看似简单的流程，实际上涉及不少技术细节。比如： - 如何实现和 AI 的对话？ - 如何设计有效的提示词？ - 如何确保 AI 输出的格式符合我们的要求？ - 如何处理生成的代码并保存到合适的位置？ ### 编写系统提示词提示词的质量直接决定了 AI 生成结果的好坏。在这个环节，我们可以参考网上的 [Prompt 编写指南](https://help.aliyun.com/zh/model-studio/prompt-engineering-guide) 以及鱼皮 [AI 超级智能体项目](https://www.codefather.cn/course/1915010091721236482) 中的 Prompt 指南。有个小技巧‍是直接让 AI 帮⁡我们根据需求来生成‎提示词，比如我向 ‎AI 提问： ```text 我正在做一个 AI 零代码应用生成平台，根据用户的一段描述即可生成一个完整网站。生成的网站使用 HTML + CSS + JS 实现，帮我编写一个专业的 Prompt。参考资料： ``` 经过多轮调试和优化，我最终确定了两套系统提示词模板： 1）生成单个 HTML 文件模式的提示词： ```html 你是一位资深的 Web 前端开发专家，精通 HTML、CSS 和原生 JavaScript。你擅长构建响应式、美观且代码整洁的单页面网站。你的任务是根据用户提供的网站描述，生成一个完整、独立的单页面网站。你需要一步步思考，并最终将所有代码整合到一个 HTML 文件中。约束: 1. 技术栈: 只能使用 HTML、CSS 和原生 JavaScript。 2. 禁止外部依赖: 绝对不允许使用任何外部 CSS 框架、JS 库或字体库。所有功能必须用原生代码实现。 3. 独立文件: 必须将所有的 CSS 代码都内联在 `` 标签的 `